<template>
	<view class="zgj-fx-c" v-if="info">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
			:style="{'height':bannerHeight+'px'}">
			<swiper-item v-for="b of banners" :key="b">
				<image :src="'https://images.51zuhuobao.com/images/'+b+'?x-oss-process=image/resize,w_1280,limit_0'">
				</image>
			</swiper-item>
		</swiper>
		<view class="container">
			<view class="ch-title zgj-row">
				<image v-if="info.grade_state===1 && info.grade===12"
					src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/gold_icon%402x.png" />
				<image v-if="info.grade_state===1 && info.grade===11"
					src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/yin_icon%402x.png" />
				<image v-if="info.grade_state===1 && info.grade===10"
					src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/tong_icon%402x.png" />
				<text>{{info.name}}</text>
			</view>
			<view class="zgj-row uni-mt-4" style="justify-content: space-between !important;align-items: center !important;">
				<text style="font-size: 13px;">{{info.viewed_num}}次浏览</text>
				<zgj-fav :checked="fav" class="favBtn" @click="favClick()" />
				<uni-icons v-if="info.phones.length>0" type="phone-filled" size="30" color="#2ead7a"
					@tap.stop="onphone(info)"></uni-icons>

			</view>
			<view class="zgj-row ch-tag uni-mt-2">
				<uni-tag v-if="info.is_leak===0" text="实力卖家" type="warning" size="mini"></uni-tag>
				<uni-tag v-if="info.dprz" :inverted="true" text="认证商家" type="success" size="mini"></uni-tag>
				<uni-tag v-if="info.bzj" :inverted="true" text="保证金" type="success" size="mini"></uni-tag>
				<uni-tag v-if="info.pps" :inverted="true" text="品牌商" type="success" size="mini"></uni-tag>
				<uni-tag v-if="info.verify_state===1" :inverted="true" text="证照齐全" type="success" size="mini"></uni-tag>
			</view>
			<view class="zgj-row chinfo uni-mt-4">
				<label>地址：</label>
				<view class="ch-addr">{{info.full_address}}</view>
			</view>
			<view class="zgj-row chinfo" v-if="info.brand">
				<label>品牌：</label>
				<view class="ch-desc">{{info.brand}}</view>
			</view>
			<view class="zgj-row chinfo" v-if="info.main_bussiness">
				<label>主营：</label>
				<view class="ch-desc ">{{info.main_bussiness}}</view>
			</view>
			<view class="ch-desc chinfo" v-if="info.detail">{{info.detail}}</view>
		</view>
		<!-- 		<view class="ch-footer">
			<uni-fav :checked="fav" class="favBtn" @click="favClick()" />
			<uni-icons type="phone-filled" size="30" color="#2ead7a"></uni-icons>
		</view> -->
	</view>
</template>

<script>
	const app = getApp()
	import Stat from '@/common/stat.js'
	import zgjFav from '../../components/zgj-fav/zgj-fav.vue'
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import {
		favMapper
	} from '@/uni_modules/zgj-pages/common/favorite.js'
	export default {
		components:{zgjFav},
		mixins:[Stat],
		data() {
			return {
				bannerHeight: 180,
				banners: [],
				favs: [],
				info: null,
				channelId: null
			};
		},
		computed: {
			fav() {
				if (!this.channelId) return false
				return this.favs.indexOf(this.channelId) >= 0
			},
			userInfo() {
				return store.userInfo
			},
			isSigned() {
				return this.userInfo && !!this.userInfo._id
			}
		},
		async onReady() {
			this.bannerHeight = uni.getSystemInfoSync().windowWidth * 9 / 16
		},
		async onLoad(e) {
			console.log(e)
			this.channelId = e.id
			this.loadData(e.id)
			this.$http.post('/web/ai/view_channel', {
				channel_id: e.id
			}, () => {})
		},
		async onShow() {
			console.log("channel detail show",this.isSigned)
			if (this.isSigned && this.channelId) {
				this.loadFavorites(this.channelId)
			}
		},
		methods: {
			async loadFavorites(channelId) {
				let rcrd = await favMapper.getFavorites(this.userInfo._id)
				console.log('favs:', rcrd)
				this.favs = rcrd === null ? [] : rcrd.channel_ids
			},
			favClick() {
				if (!this.isSigned) {
					uni.showModal({
						content: '该操作需要登录，是否登录？',
						success: (res) => {
							if (res.confirm) {
								app.globalData.redirectUrl = '@/uni_modules/zgj-pages/pages/chdetail/chdetail'
								uni.navigateTo({
									url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
								})
							}
						}
					})
				} else {
					if (this.fav) {
						favMapper.removeFavorite(this.userInfo._id, this.channelId)
						var idx = this.favs.indexOf(this.channelId)
						if (idx >= 0) {
							this.favs.splice(idx, 1)
						}
					} else {
						favMapper.addFavorite(this.userInfo._id, this.channelId)
						this.favs.push(this.channelId)
					}
				}
			},
			loadData(id) {
				this.$http.get('/web/ai/channel', {
					channel_id: id
				}, (resp) => {
					var phones = resp.contact_phone || ''
					phones =phones==='' ? [] : phones.split(',')
					resp.phones = phones.concat(resp.tel_list)
					resp.tags.forEach((t) => {
						if (t.tag_id === 100) {
							resp.dprz = true
						} else if (t.tag_id === 101) {
							resp.bzj = true
						} else if (t.tag_id === 125) {
							resp.pps = true
						}
					})
					var photos = resp.logo ? [resp.logo] : []
					this.banners = photos.concat(resp.store_images)
					this.info = resp
				})
			},
			onphone(item) {
				console.log(item)
				uni.showActionSheet({
					itemList: item.phones,
					success: (e) => {
						let phone = item.phones[e.tapIndex]
						uni.makePhoneCall({
							phoneNumber: phone,
							success: () => {
								this.statTel({phone:phone,channel_id:this.channelId})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.zgj-fx-c {
		padding-bottom: 40px;
	}

	.swiper {
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ch-title {
		font-size: 16px;
		font-weight: 600;
		align-items: center;

		image {
			width: 30px;
			height: 30px;
			min-width: 30px;
			margin-right: 10px;
		}

		.tip {
			font-weight: 500;
			font-size: 12px;
			flex-shrink: 0;
		}
	}

	.ch-tag {
		.uni-tag {
			margin-right: 10px;
		}
	}

	.ch-footer {
		position: absolute;
		width: 100%;
		height: 40px;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.chinfo {
		margin-bottom: 4px;
		font-size: 14px;

		label {
			min-width: 50px;
		}
	}

	.ch-desc {
		color: #666;
	}
</style>